<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <title>Java Script</title>
    </head>
    <body>
        <p id = "demo" >测试</p>
        <p id = "demo2" >测试</p>
        <p id = "demo3" >测试</p>

        <script type="text/javascript">
            var arr = [3,4,5,23,true,false];
            var x = arr.length;//数组的长度
            var y = arr.indexOf(23);//23值的索引下标
            console.log("数组的长度：x =" + x + "值23的下标值：y = " + y);

            //合并两个数组
            var a = ["Google", "Taobao"];
            var b = ["Runoob", "Wiki", "Zhihu"];
            var c = a.concat(b);
            document.write(c)
            var parents = ["Jani", "Tove"];
            var brothers = ["Stale", "Kai Jim", "Borge"];
            var children = ["Cecilie", "Lone"];
            //合并三个数组
            var family = parents.concat(brothers,children);
            document.write(family)

            //将数组作为字符串输出：join将数组元素连接为一个字符串，允许你自定义分隔符，也可以不指定分隔符（默认使用逗号）
            // toString() 将数组元素连接为一个字符串，使用逗号作为分隔符，不能自定义分隔符。
            var fruits = ["Banana", "Orange", "Apple", "Mango"];
            var elementId = document.getElementById("demo");
            console.log(fruits.join());
            console.log(elementId.innerHTML);
            console.log(elementId.innerText);
            elementId.innerHTML = fruits.join();
            // elementId.innerText = fruits.join();


            // 删除数组最后一个元素
            fruits.pop();
            elementId.innerHTML = fruits;

            // 在数组的末尾添加元素
            fruits.push("天天");
            elementId.innerHTML = fruits;

            // 数组反转
            fruits.reverse();
            elementId.innerHTML = fruits;

            //删除数组的第一个元素
            var elementId2 = document.getElementById("demo2");
            var del = fruits.shift();
            elementId.innerHTML = "删除第一个元素后，数组为：" + fruits;
            elementId2.innerHTML = "删除的第一个元素为：" + del;

            // 在数组的开头添加新元素:unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值将被返回成 undefined 
            fruits.unshift("无敌","填西");
            elementId.innerHTML = fruits;

            // 数组截取下标为1和2的元素:前包含后不包含
            var sliceArr = fruits.slice(1,3);
            elementId.innerHTML = sliceArr;

            //向数组添加元素
            var e = document.getElementById("demo3");
            var fruits2 = ["Banana", "Orange", "Apple", "Mango"];
            var ref = fruits2.splice(2,1,"飞燕","无敌");
            e.innerHTML = "替换后的数组：" + fruits2;
            elementId2.innerHTML = "被替换的值：" + ref;

            // 数组的升序排序
            var fruits = ["Banana", "Orange", "Apple", "Mango"];
            fruits.sort();
            elementId2.innerHTML = "排序后的数组：" + fruits;
            // 数字类型升序
            var points = [40,100,1,5,25,10];
            points.sort(function(a,b){return a-b});
            elementId2.innerHTML = "数字升序排列后的数组：" + points;
            // 数字类型倒序
            var points = [40,100,1,5,25,10];
            points.sort(function(a,b){return b-a});
            elementId.innerHTML = "数字倒序排列后的数组：" + points;
        </script>
    </body>
</html>